Il est important de bien mettre en place le script d'initialisation. Il faut l'utilser juste une fois, c'est une boucle sur les éléments .js-progressBar.
Les calcules pour la largeur de la barre de progression ainsi que le pourcentage affiché dedans se font automatiquement en javascript.
Pour se faire il faut renseigner les attributs html de la div .o-progressBar.js-progressBar de la façon suivante :
data-value : (Number) la valeur en cours utilisée, elle doit être de la même unité que la valeur min et la valeur max (pas en pourcentage, c'est le javascript qui s'occupe du calcule)data-valueMin : (Number) la valeur minimum pour la section, il s'agira à 99% du temps de 0 mais on a laisse la main dessus au cas oudata-valueMax : (Number) la valeur maximum pour la selectiondata-valueThreshold : (Number) la valeur en pourcentage à partir du moment ou la barre change de couleur (dans l'exemple on a utilisé 90%)Vous pouvez changer le contenu de la tooltip en éditant le contenu de la div .o-progressBar__toolTip .u-text.
assets/scripts/local/ProgressBar.js5.1Go utilisés sur 30Go
27.2Go utilisés sur 30Go
<div class="o-progressBar js-progressBar" data-value="5.1" data-valueMin="0" data-valueMax="30" data-valueThreshold="90%">
<div class="o-progressBar__content">
<div class="o-progressBar__inner"><span>0%</span>
<div class="o-progressBar__toolTip">
<div class="u-text">Ajouter le contenu de la tooltip ici</div>
</div>
</div>
</div>
<div class="o-progressBar__info">
<p class="u-text">5.1Go utilisés sur 30Go</p>
</div>
</div>
<script>
window.addEventListener("DOMContentLoaded", (event) => {
const progressBars = document.querySelectorAll('.js-progressBar');
progressBars.forEach((el) => {
const progress = new ProgressBar(el);
});
});
</script>